<template>
  <div>
    <div class="main">
      <div class="gradient-border">
        <div class="title">该喝水啦！</div>
        <div class="buttons fle-jcsb">
          <div class="button center" @click="alert(1)">15min后提醒</div>
          <div class="button center" @click="alert(0)">喝了！</div>
        </div>
      </div>
    </div>
  </div>

</template>


<script>
  export default{
    methods:{
      alert(n){
        const { ipcRenderer, remote } = require("electron")
        ipcRenderer.send('onClickAlert', n)
        remote.getCurrentWindow().close()
      }
    }
  }
</script>


<style lang="scss">
.main {
  width: 100vw;
  height: 100vh;
  overflow: hidden;
  padding: 3px;
  box-sizing: border-box;
  .gradient-border {
    width: 100%;
    height: 100%;
    --borderWidth: 3px;
    position: relative;
    border-radius: var(--borderWidth);
    box-sizing: border-box;
    overflow: hidden;
  }

  .gradient-border:after {
    content: '';
    position: absolute;
    top: calc(-1 * var(--borderWidth));
    left: calc(-1 * var(--borderWidth));
    height: calc(100% + var(--borderWidth) * 2);
    width: calc(100% + var(--borderWidth) * 2);
    background: linear-gradient(60deg, #f79533, #f37055, #ef4e7b, #a166ab, #5073b8, #1098ad, #07b39b, #6fba82);
    border-radius: calc(2 * var(--borderWidth));
    z-index: -1;
    animation: animatedgradient 3s ease alternate infinite;
    background-size: 300% 300%;
  }


  @keyframes animatedgradient {
    0% {
      background-position: 0% 50%;
    }

    50% {
      background-position: 100% 50%;
    }

    100% {
      background-position: 0% 50%;
    }
  }

  .title {
    padding: 20px;
    font-size: 28px;
    color: white;
    text-align: center;
  }

  .buttons {
    padding: 20px 40px;

    .button {
      width: 80px;
      height: 40px;
      color: white;
      cursor: pointer;
      user-select: none;
      font-size: 12px;
      border-radius: 3px;
      &:last-child{
        background-color: white;
        color: #ef4e7b;
        width: 100px;
        font-size: 14px;
      }
    }
  }

}
</style>